import React from 'react';
import Search from 'components/public/search';
import { Button, Popconfirm } from 'antd';
import moment from 'moment';
import { connect } from 'dva';
import { EditableContext, EditableFormRow, EditableCell } from 'components/public/editable';

const { Consumer } = EditableContext;

class Events extends React.PureComponent {
	constructor() {
		super();
		this.state = {
			id: null,
		};
	}
	componentDidMount() {
		this.getList();
	}
	getList = () => {
		const { dispatch } = this.props;
		dispatch({
			type: 'data/getListEvent',
		});
	};
	delete = ids => {
		console.log(ids);
	};
	edit = ({ id }) => {
		this.setState({
			id,
		});
	};
	onConfirm = () => {
		this.setState({
			id: null,
		});
	};
	save = (form, id) => {
		const _this = this;
		form.validateFields((error, row) => {
			if (error) {
				return;
			}
			console.log(row, id);
			_this.onConfirm();
		});
	};
	componentWillUnmount() {
		this.props.dispatch({
			type: 'data/save',
			payload: { eventSearch: { startDate: '', endDate: '', pageNum: 1, pageSize: 10 } },
		});
	}
	render() {
		const {
			list: { pageData, pageSize, pageNum, total },
		} = this.props;
		const { id } = this.state;
		const columns = [
			// { dataIndex: 'id', title: '编号', aligh: 'center', width: 80, editable: false },
			{
				dataIndex: 'createTime',
				title: '民生年月',
				width: 200,
				// render: text => moment(text).format('YYYY年MM月'),
				editable: false,
			},
			{
				dataIndex: 'untreatedNum',
				title: '未处理',
				aligh: 'center',
				width: 200,
				editable: true,
			},
			{
				dataIndex: 'processingNum',
				title: '处理量',
				aligh: 'center',
				width: 200,
				editable: true,
			},
			{
				dataIndex: 'incidentReportNum',
				title: '事件上报',
				aligh: 'center',
				width: 100,
				editable: true,
			},
			{ dataIndex: 'contradictionNum', title: '矛盾纠纷', width: 100, editable: true },
			{ dataIndex: 'urbanConstructionNum', title: '市政建设', width: 100, editable: true },
			{ dataIndex: 'peddlersNum', title: '摊贩管理', width: 100, editable: true },
			{ dataIndex: 'others', title: '其他', width: 100, editable: true },
			{ dataIndex: 'reportingNum', title: '事件总数', width: 100, editable: true },
			// {
			// 	dataIndex: 'handle',
			// 	title: '操作',
			// 	aligh: 'center',
			// 	width: 200,
			// 	render: (text, record) => (
			// 		<>
			// 			{id === record.id ? (
			// 				<Consumer>
			// 					{form => (
			// 						<>
			// 							<Button
			// 								style={{ marginRight: 10 }}
			// 								type="primary"
			// 								onClick={() => this.save(form, record.id)}
			// 							>
			// 								保存
			// 							</Button>
			// 							<Popconfirm
			// 								title="是否取消保存?"
			// 								cancelText="不是"
			// 								okText="是的"
			// 								onConfirm={this.onConfirm}
			// 							>
			// 								<Button>取消</Button>
			// 							</Popconfirm>
			// 						</>
			// 					)}
			// 				</Consumer>
			// 			) : (
			// 				<>
			// 					<Button
			// 						type="primary"
			// 						style={{ marginRight: 10 }}
			// 						onClick={() => this.edit(record)}
			// 					>
			// 						编辑
			// 					</Button>
			// 					<Popconfirm
			// 						title="确认删除?"
			// 						cancelText="取消"
			// 						okText="删除"
			// 						onConfirm={() => this.delete([record.id])}
			// 					>
			// 						<Button type="danger">删除</Button>
			// 					</Popconfirm>
			// 				</>
			// 			)}
			// 		</>
			// 	),
			// },
		];
		const propsColumns = columns.map(col => {
			if (!col.editable) {
				return col;
			}
			return {
				...col,
				onCell: record => ({
					record,
					dataindex: col.dataIndex,
					title: col.title,
					editing: id === record.id ? 'true' : 'false',
				}),
			};
		});
		const props = {
			columns: propsColumns,
			dataSource: pageData,
			pageNum,
			pageSize,
			total,
			x: 1480,
			delete: this.delete,
			components: {
				body: {
					row: EditableFormRow,
					cell: EditableCell,
				},
			},
			keyword: false,
			plate: false,
			getList: this.getList,
			rowKey: 'createTime',
			format: 'YYYY-MM',
		};
		return <Search {...props} />;
	}
}
export default connect(state => ({
	list: state.data.eventsList,
}))(Events);
